<template>
  <div>
    <Row class="Row3">

      <!--<i-col :span="8" class="Row3Icol">
        <Row class="icolTitle1">
          <i-col span="24" class="icolTitle1Content">股道到车数量:</i-col>
        </Row>
        <Row class="icolTitle2 Row3Background">
          <i-col span="12" class="icolTitle2Left">统计时间:{{trackParam.startTime}}</i-col>
          <i-col span="12" class="icolTitle2Right">
            <Button size="small" @click="trackParam.startTime=todayStart">今日</Button>
            <Button size="small" @click="trackParam.startTime=WeekStart">最近七日</Button>
            <Button size="small" @click="trackParam.startTime=MonthStart">最近30日</Button>
          </i-col>
        </Row>
        <Row class="Row3Background" style="padding: 15px;">
          <i-col>
            <div id="myChartBar" style="width:100%;min-height: 300px;"></div>
          </i-col>
        </Row>
      </i-col>-->

      <i-col :span="12" class="Row3Icol">
        <Row class="icolTitle1">
          <i-col span="24" class="icolTitle1Content">货物品类占比:</i-col>
        </Row>
        <Row class="icolTitle2 Row3Background">
          <i-col span="12" class="icolTitle2Left">统计时间:{{productParam.endTime}}</i-col>
          <i-col span="12" class="icolTitle2Right">
            <Button size="small" @click="productParam.startTime=todayStart">今日</Button>
            <Button size="small" @click="productParam.startTime=WeekStart">最近七日</Button>
            <Button size="small" @click="productParam.startTime=MonthStart">最近30日</Button>
          </i-col>
        </Row>
        <Row class="Row3Background" style="padding: 15px;">
          <i-col style="text-align: center;">
            <div id="myChartPie" style="width:100%;min-height: 300px;text-align: center" v-if="!pieNodata">
            </div>
            <img style="height: 296px;"  src="../../../../../static/img/station_report_nodata.png" v-if="pieNodata" alt="">
          </i-col>
        </Row>
      </i-col>

      <i-col :span="12" class="Row3Icol Row3Background">
        <Row class="icolTitle1">
          <i-col span="24" class="icolTitle1Content">货物重量:</i-col>
        </Row>
        <Row class="icolTitle2">
          <i-col span="12" class="icolTitle2Left">统计时间:{{productWeightParam.endTime}}</i-col>
          <i-col span="12" class="icolTitle2Right">
            <Button size="small" @click="productWeightParam.startTime=WeekStart">最近七日</Button>
            <Button size="small" @click="productWeightParam.startTime=MonthStart">最近30日</Button>
          </i-col>
        </Row>
        <Row style="padding: 15px;">
          <i-col style="text-align: center;">
            <div id="myChartLine" style="width:100%;min-height: 300px;text-align: center" v-if="!lineNodata">
            </div>
            <img style="height: 296px;" src="../../../../../static/img/station_report_nodata.png" v-if="lineNodata" alt="">
          </i-col>
        </Row>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import {getTrackArriveCountChartData, getCargoWeightChartData, getCargoRatioChartData} from '@api/stationReport'
  import moment from 'moment'
  import _ from 'lodash'

  export default {
    name: 'trackingCode',
    data () {
      let pieNodata = false
      let lineNodata = false
      let todayStart = moment().format('YYYY-MM-DD') + ' 00:00:00'
      let todayEnd = moment().format('YYYY-MM-DD HH:mm:ss')
      let WeekStart = moment().subtract(7, 'days').format('YYYY-MM-DD') + ' 00:00:00'
      let MonthStart = moment().subtract(30, 'days').format('YYYY-MM-DD') + ' 00:00:00'
      let trackParam = {
        startTime: moment().format('YYYY-MM-DD') + ' 00:00:00',
        endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        stationCode: ''
      }
      let productParam = {
        startTime: moment().format('YYYY-MM-DD') + ' 00:00:00',
        endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        stationCode: ''
      }
      let productWeightParam = {
        startTime: moment().subtract(7, 'days').format('YYYY-MM-DD') + ' 00:00:00',
        endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        stationCode: ''
      }
      let datas = {pieNodata, lineNodata, todayStart, todayEnd, WeekStart, MonthStart, trackParam, productParam, productWeightParam}
      return datas
    },
    props: {
      stationCode: {
        type: String,
        default: ''
      }
    },
    methods: {
      drawBar () {
        this.trackParam.stationCdoe = this.stationCdoe
        getTrackArriveCountChartData(this.trackParam).then(res => {
          if (res.data.isSuccess === 1) {
            if (res.data.data && res.data.data.length > 0) {
              let myChartBar = echarts.init(document.getElementById('myChartBar'))
              let option = {
                xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                  type: 'value'
                },
                series: [{
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar',
                  label: {
                    normal: {
                      show: true,
                      position: 'top',
                      color: '#669FF1'
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                          {offset: 0.1, color: '#659FF1'},
                          {offset: 0.9, color: '#A4C7FC'}
                        ]
                      )
                    }
                  }
                }]
              }
              if (option && typeof option === 'object') {
                myChartBar.setOption(option, true)
              }
            }
          }
        })
      },
      drawPie () {
        this.productParam.stationCode = this.stationCode
        this.pieNodata = false
        getCargoRatioChartData(this.productParam).then(res => {
          if (res.data.isSuccess === 1) {
            if (res.data.data && res.data.data.length > 0) {
              let mydata = []
              _.forEach(res.data.data, (item) => {
                mydata.push({value: item.cnt, name: item.zpmhz})
              })
              let theme = 'light'
              let myChartPie = echarts.init(document.getElementById('myChartPie'), theme)
              let option = {
                tooltip: {
                  trigger: 'item',
                  name: '货物品类占比',
                  formatter: '货物品类占比 <br/>{b} : {c} ({d}%)'
                },
                series: [
                  {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    data: mydata,
                    itemStyle: {
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
              if (option && typeof option === 'object') {
                myChartPie.setOption(option, true)
              }
            } else {
              this.pieNodata = true
              /* this.$Notice.warning({
               title: '温馨提示',
               desc: '暂无数据'
               }) */
            }
          }
        })
      },
      drawLine () {
        this.productWeightParam.stationCode = this.stationCode
        this.lineNodata = false
        getCargoWeightChartData(this.productWeightParam).then(res => {
          if (res.data.isSuccess === 1) {
            if (res.data.data && res.data.data.length > 0) {
              let mydataX = []
              let mydataY = []
              _.forEach(res.data.data, (item) => {
                mydataX.push(item.md)
                mydataY.push(item.weight)
              })
              let myChartLine = echarts.init(document.getElementById('myChartLine'))
              let option = {
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  axisLine: {
                    lineStyle: {
                      color: '#FFFFFF'
                    }
                  },
                  data: mydataX
                },
                yAxis: {
                  type: 'value'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    label: {
                      backgroundColor: '#6a7985'
                    }
                  }
                },
                series: [{
                  data: mydataY,
                  type: 'line',
                  smooth: true,
                  symbol: 'circle',
                  symbolSize: 5,
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: '#478FF4'
                    }
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#659FF1'
                      }, {
                        offset: 1,
                        color: '#A5C7FC'
                      }])
                    }
                  }
                }]
              }
              if (option && typeof option === 'object') {
                myChartLine.setOption(option, true)
              }
            } else {
              this.lineNodata = true
              /* this.$Notice.warning({
               title: '温馨提示',
               desc: '暂无数据'
               }) */
            }
          }
        })
      }
    },
    computed: {},
    watch: {
      trackParam: {
        handler: function (val, oldVal) {
        },
        deep: true
      },
      productParam: {
        handler: function (val, oldVal) {
          this.drawPie()
        },
        deep: true
      },
      productWeightParam: {
        handler: function (val, oldVal) {
          this.drawLine()
        },
        deep: true
      }
    },
    mounted () {
      this.drawPie()
      this.drawLine()
    }
  }
</script>
<style type="text/css" scoped>


  .Row3 {
    margin: 15px auto;
  }

  .Row3 .Row3Icol {
    padding-right: 10px;
  }

  .Row3Background {
    background-color: #fff;
  }

  .Row3 .icolTitle1 {
    padding: 10px 15px;
    background: #FBFCFE;
    font-size: 14px;
    color: #59595A;
    font-weight: 400;
  }

  .Row3 .icolTitle2 {
    padding: 15px;
  }

  .Row3 .icolTitle2 .icolTitle2Left {
    font-size: 12px;
    color: #949494;
  }

  .Row3 .icolTitle2 .icolTitle2Right {
    text-align: right;
  }
</style>
